<template>
    <div  class="login-container">
        <el-table
        :data="list"
        border
        fit
        style="width: 100%">
          <el-table-column
            prop="id"
            label="id">
          </el-table-column>
          <el-table-column
            prop="trueName"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="name"
            label="用户名">
          </el-table-column>
          <!-- <el-table-column
            prop="password"
            label="密码">
          </el-table-column> -->
           <el-table-column
            prop="email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="创建时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
            <router-link :to="'/user/update/'+scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
            </router-link>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="selectByPage"
          :current-page="page"
          :page-size="limit"
          :total="total"
          layout="total, prev, pager, next"
          >
        </el-pagination>
    </div>
     
  
  </template>
  
  <script>
      // 引入user.js文件
      import user from '@/api/rbac/user'
  
      export default {
          name: '',
          data() {
              return {
                  list:null,//表格对应的数据
                  page:1,//当前页
                  limit:10,//每页记录数
                  total:0,//总记录数
              }
          },
          created() {
             this.selectByPage(this.page, this.list)
          },
          methods: {
              //如果没有传递page，默认是1
              selectByPage(page = 1) {
                this.page = page
                user.selectByPage(this.page, this.limit)
                  .then(response => {
                      console.log(response)
                      this.list = response.data.list  
                      this.total = response.data.total
                  })
              },
              handleDelete(id) {
                this.$confirm('您确定要删除么?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    user.deleteById(id)
                      .then(response => {
                          if(response.ok) {
                            //提示信息
                            this.$message({
                                type: 'success',
                                message: response.msg
                            });
                            //回到列表页面
                            this.selectByPage()
                          } else {
                            this.$message({
                                type: 'error',
                                message: response.msg
                            });
                          }
                      })
                })
              },
              handleEdit(id) {
                this.$confirm('您确定要删除么?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    user.deleteById(id)
                      .then(response => {
                          if(response.ok) {
                            //提示信息
                            this.$message({
                                type: 'success',
                                message: response.msg
                            });
                            //回到列表页面
                            this.selectByPage()
                          } else {
                            this.$message({
                                type: 'error',
                                message: response.msg
                            });
                          }
                      })
                })
              }
          }
      }
  </script>
   
  <style scoped>
       
  </style>